和WordPress一樣，Gatsby.js也有plugin系統，透過NPM安裝。你可以在Gatsby.js 官網找到所有plugin。今天我們要學習怎樣安裝plugin。

gatsby-config.js

gatsby-config.js當中的plugins部分設定了這個網站的所有plugins。以下是預設Starter的gatsby-config.js：

module.exports = {
  siteMetadata: {
    title: 'Gatsby',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'gatsby-starter-default',
        short_name: 'starter',
        start_url: '/',
        background_color: '#663399',
        theme_color: '#663399',
        display: 'minimal-ui',
        icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.
      },
    },
    'gatsby-plugin-offline',
  ],
}

可以看到plugins是一個array，裡面一共有三個plugins，以逗號分開。其中，第二個plugin是一個object，以大括號包起來。這樣做是為了對plugin進行設定。大括號裡的resolve部分是plugin的名稱，options部分便是針對這個plugin的設定，設定內容因不同plugin而異。

安裝plugin

以gatsby-plugin-sass為例，官方文檔提供了指令：

npm install --save node-sass gatsby-plugin-sass

在Command Line，這個網站的位置執行即可。

接著，要在gatsby-config.js中加入這個plugin，由於我們不需要額外設定，只要將plugin名稱加到plugins array最後即可：

'gatsby-plugin-offline',
'gatsby-plugin-sass',

測試plugin

為了測試這個plugin，我們可以把/src/components/當中的layout.css，改為SASS專用的SCSS格式：layout.scss。並在layout.js裡，找到：

import './layout.css'

同樣改為：

import './layout.scss'

執行gatsby develop，查看效果，應該和之前完全一樣。若你的gatsby網站一直跑著，記得先結束（Control + C），再執行一次gatsby develop，因為安裝plugin後需要重啟。

若要進一步測試，可以在layout.scss當中使用SASS語法，如：

body {
  margin: 0
  background: #ff0;
  p {
    color: #fff;
  }
}

同步發表於: NodeJust.com